<template>
  <div>
    盒子模型：<br>
    标准盒子模型：box-sizing: content-box; <br>
    怪异盒子模型 box-sizing: border-box; <br>

    <div class="box1">标准盒子模型</div>

	<div class="box2">怪异盒子模型</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    /* body {
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			} */

			/* div {
				width: 300px;
				height: 300px;
				line-height: 300px;
				text-align: center;
				margin-right: 10px;
				font-size: 30px;
			} */

			.box1 {
                width: 300px;
				height: 300px;
				box-sizing: content-box;
				background-color: #FF0000;
			}

			.box2 {
                width: 300px;
				height: 300px;
				box-sizing: border-box;
				background-color: #CD5C5C;
			}
</style>>
